

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <div>管理系统</div>
        <!--  左侧导航栏-->
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#d3dce6"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span @click="ck($event, 'indexto')">首页</span>
          </el-menu-item>
          <el-menu-item index="1">
            <i class="el-icon-document"></i>
            <span slot="title" @click="ck($event, 'shopmanager', '商品管理')"
              >商品管理</span
            >
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-user"></i>
            <span slot="title" @click="ck($event, 'usermanager', '用户管理')"
              >用户管理</span
            >
          </el-menu-item>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>其他</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="ck($event, 'one', '页面1')"
                >页面1</el-menu-item
              >
              <el-menu-item index="4-2" @click="ck($event, 'two', '页面2')"
                >页面2</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 面包头部 -->
        <el-header>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/indexto' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/shopmanager' }"
              >商品管理</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/usermanager' }"
              >用户管理</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/one' }"
              >页面1</el-breadcrumb-item
            >
            <el-breadcrumb-item :to="{ path: '/two' }"
              >页面2</el-breadcrumb-item
            >
            <el-breadcrumb-item></el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 头像 -->
          <div class="demo-type">
            <div>
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
            </div>
          </div>
        </el-header>
        <el-main>
          <!-- 动态标记标签 -->
          <div class="tag">
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <!-- <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input> -->
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { set } from "vue";
export default {
  data() {
    return {
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      s1: true,
      s2: true,
      s3: true,
      s4: false,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 商品、用户管理的路由跳转
    ck(e, name1, s) {
      console.log(e);
      this.$router.push({ name: name1 });
      this.dynamicTags.push(s);
    },
    //  动态标记标签
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      if (this.dynamicTags.length < 10) {
        this.$router.push({ name: "indexto" });
      }
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
  // 后置路由，离开的时候被调用
  beforeRouteLeave(to, from, next) {
    console.log("我是后置路由");
    if (to.name == "home") {
      next({ name: "home" });
    } else {
      next();
    }
  },
};
</script>

<style lang="less" scoped>
// 头像
.demo-type {
  margin-right: 10px;
  line-height: 50%;
}
el-col {
  margin-left: 100px;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-breadcrumb {
  line-height: 60px;
  height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: 900px;
  div {
    margin-top: 20px;
    color: #ffffff;
    font-size: 20px;
  }
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 45px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
// 动态标记标签
.tag {
  text-align: left;
  height: 45px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>